<template>
    <div>
        <div ref="sceneDom">

        </div>
        啊啊啊
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import * as THREE from 'three';

const sceneDom = ref(null);


/**
 * 创建3d场景对应scene
 */
const scene = new THREE.Scene();

/**
* 创建网格模型
*/
//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(50, 50, 50);
//创建材质对象material
const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff,//设置材质颜色
})
//网格模型对象 material
const mesh = new THREE.Mesh(geometry, material)
mesh.position.set(0, 0, 0)//设置模型对象在三维空间中的位置，默认在坐标原点
scene.add(mesh);//网格模型添加到场景中

// console.log('三维场景', scene);

const width = window.innerWidth;
const height = window.innerHeight;
/**
 * 创建一个透视投影相机对象
 */
//30:视角角度， widht/height: canvas画布宽高比，1：近裁截面，3000：远裁截面
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
//设置相机的位置
camera.position.set(200, 200, 200)
//相机的视线  观察目标的坐标点

camera.lookAt(0, 0, 0);//坐标原点
// camera.lookAt(0,10,0);//y轴上一点

// camera.lookAt(mesh.positon)

/**
 * 创建一个webGl渲染器
 */
const renderer = new THREE.WebGLRenderer({
    antialias:true, //启用抗锯齿
});
//告诉threeJs你的设备屏幕像素比
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);//canvas画布宽高度
renderer.render(scene, camera); //执行一个渲染操作，类比相机拍照动作，咔嚓

onMounted(() => {
    //把渲染结果canvas画布，也就是所谓的“照片”，添加到网页页面
    sceneDom.value.appendChild(renderer.domElement);

})


function animate(time) {
    time *= 0.001;  // 将时间单位变为秒

    mesh.rotation.x = time;
    mesh.rotation.y = time;



    renderer.render(scene, camera);

    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>

<style lang="scss" scoped></style>